<template>
  <div>
    <Header></Header>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col>
        <div class="w">
          <div class="login clearfix">
            <div class="login-inner">
              <div class="login-options clearfix">
                <div @click="loginByPhone=true" :class="{'login-user-account':true, 'active':!loginByPhone}">手机号登录</div>
                <div @click="loginByPhone=false" :class="{'login-user-account':true, 'active':loginByPhone}">账号密码登录</div>
              </div>
              <div class="login-content">
                <LoginByUserPhone v-if="loginByPhone"></LoginByUserPhone>
                <LoginByUserAccount v-else></LoginByUserAccount>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Header from '../Common/Header'
import LoginByUserAccount from './LoginByUserAccount'
import LoginByUserPhone from './LoginByUserPhone'
export default {
  name: 'Login',
  components: {
    LoginByUserAccount,
    LoginByUserPhone,
    Header
  },
  data () {
    return {
      loginByPhone: true
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../assets/css/base.styl"
  .w
    width: 100%
    .login
      position: relative
      width: $width
      margin 0 auto
      background: url("../../assets/images/bgc.png") -344px 0 no-repeat
      height: 100%
      min-height 520px
      .login-inner
        width: 380px
        float: right
        margin-top 50px
        border: 1px solid #ccc
        -webkit-border-radius: 4px
        -moz-border-radius: 4px
        border-radius: 4px
        background-color: #fff
        box-sizing border-box
        box-shadow 2px 4px 19px rgba(0, 0, 0, .3)
        .login-options
          width: 380px
          /*padding 0 20px*/
          -webkit-box-sizing: border-box
          -moz-box-sizing: border-box
          box-sizing: border-box
          div
            font-size 14px
            z-index: 1
            display inline-block
            float: left
            width: 50%
            height: 50px
            -webkit-box-sizing: border-box
            -moz-box-sizing: border-box
            box-sizing: border-box
            margin 0 auto
            text-align: center
            line-height: 50px
            margin-bottom 20px
            cursor: pointer;
            background-color: #545C64
            color: rgb(255, 208, 75)
          .active
            color: #fff
</style>
